<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .oul {
            display: flex;
            text-align: center;
            line-height: 46px;
        }

        .oul>li {
            flex: 1;
        }

        .box {
            text-align: center;
            line-height: 200px;
        }

        .active {
            background: orange;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-tab :indexs="0" :arr="list"></my-tab>

        <my-tab :indexs="2" :arr="list2"></my-tab>

        <my-tab :indexs="1"></my-tab>
    </div>



    <!-- Tab组件 -->
    <template id="tab">
        <div>
            <ul class="oul">
                <!-- <li :class="index === 0? 'active': ''" v-for="(item, index) in list">
                    {{ item.title }}
                </li> -->

                <li :class="{
                        active: index === count
                    }" v-for="(item, index) in arr" @click="changeCount(index)">
                    {{ item.title }}
                </li>
            </ul>

            <div class="box">
                {{ arr[count].text }}
            </div>
        </div>
    </template>

    <script src="./vue.js"></script>
    <script>

        // Tab组件
        const Tab = {
            template: "#tab",
            props: {
                arr: {
                    type: Array,
                    // required  是否必传
                    default: () => {
                        return [
                            {
                                title: "默认",
                                text: "默认的内容"
                            },
                            {
                                title: "默认1",
                                text: "默认1的内容"
                            }
                        ]
                    }
                },
                indexs: {
                    type: Number
                }
            },
            data() {
                return {
                    count: this.indexs
                }
            },
            methods: {
                changeCount(index) {
                    this.count = index
                }
            },
        }
        new Vue({
            el: "#app",
            components: {
                "my-tab": Tab
            },
            data: {
                list: [
                    {
                        title: "语文",
                        text: "语文的内容"
                    },
                    {
                        title: "数学",
                        text: "数学的内容"
                    },
                    {
                        title: "英语",
                        text: "英语的内容"
                    }
                ],
                list2: [
                    {
                        title: "政治",
                        text: "政治的内容"
                    },
                    {
                        title: "生物",
                        text: "生物的内容"
                    },
                    {
                        title: "化学",
                        text: "化学的内容"
                    }
                ]
            }
        })
    </script>
</body>

</html>